import { Link } from '@brillout/docpress'

import { UiFrameworkExtension, ProvidedBy, OnlyHtmlNote, ConfigSpec } from '../../components'

<ConfigSpec
  env="server"
  providedBy={<ProvidedBy noCustomGuide />}
>
```ts ts-only hide-menu
type Value = string | null | undefined
type Image = Value | ((pageContext) => Value)
```
</ConfigSpec>

> See <Link href="/head-tags" /> for a general introduction about `<head>` tags.

The `image` setting sets the [preview image upon URL sharing](https://ahrefs.com/blog/open-graph-meta-tags).

```ts
// pages/+config.ts

import type { Config } from 'vike/types'
import previewImage from './previewImage.jpg'

export default {
  image: previewImage
} satisfies Config
```

> It adds
> [`<meta property="og:image">`](https://ogp.me) (preview image upon URL sharing)
> and
> [`<meta name="twitter:card" content="summary_large_image">`](https://developer.x.com/en/docs/x-for-websites/cards/overview/summary-card-with-large-image)
> to `<head>`:
>
> ```html
> <head>
>   <meta property="og:image" content="/assets/previewImage.9d8ha1.jpg">
>   <meta name="twitter:card" content="summary_large_image">
> </head>
> ```

You can set its value using a <Link href="/pageContext">`pageContext`</Link> function:

```ts
// pages/some-page/+image.ts
// Environment: server

import type { Data } from './+data'
import type { PageContextServer } from 'vike/types'

export function image(pageContext: PageContextServer<Data>) {
  return pageContext.data.product.image
}
```


## Under the hood

<OnlyHtmlNote />


## See also

- [Ahrefs > Blog > Open Graph Meta Tags: Everything You Need to Know](https://ahrefs.com/blog/open-graph-meta-tags/)
- <Link href="/head-tags" />
- <Link href="/settings#html-shell" doNotInferSectionTitle />
